<template>
    <div class="content">
        <div class="nav-tool">
            <u-icon
                name="arrow-left"
                color="#000000"
                size="20"
                @click="back"
                v-if="!showHome"
            ></u-icon>
            <!--<div class="line" v-if="showHome"></div>-->
            <u-icon size="22" color="#000000" name="home" @click="toHome" v-if="showHome"></u-icon>
            <p class="title">订单详情</p>
        </div>
        <div class="container">
            <div class="sub-item">
                <div class="status-info">
                    <template v-if="detail.status === 30">
                        <img class="icon" src="@/static/images/record/finish.png" />
                        <div class="finish">已完成</div>
                    </template>
                    <template v-if="detail.status === 40">
                        <img class="icon" src="@/static/images/record/closed.png" />
                        <div class="closed">已关闭</div>
                    </template>
                </div>
            </div>
            <div class="sub-item" v-for="item in detail.items" :key="item.id">
                <div class="head">
                    <div class="left">
                        <img class="icon" src="@/static/images/common/shop.png" />
                        {{ detail.studyhallName || '' }}
                    </div>
                </div>
                <div class="sub-info">
                    <u--image
                        :src="item.picUrl"
                        width="180rpx"
                        height="180rpx"
                        :lazy-load="true"
                        mode="aspectFill"
                        radius="8rpx"
                        @click="showPreview(item.picUrl)"
                    ></u--image>
                    <div class="right">
                        <div class="name">{{ item.spuName }}</div>
                        <div class="desc">
                            {{ item.description }}
                        </div>
                        <p class="num">×{{ item.count }}</p>
                        <div class="price">
                            <span class="unit">¥</span
                            ><span class="money">{{ item.price | formatMoney(2) }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="sub-item">
                <div class="head">
                    <div class="left">
                        <img class="icon-small" src="@/static/images/common/order.png" />
                        订单信息
                    </div>
                </div>
                <div class="order-info">
                    <img class="icon" src="@/static/images/common/way.png" />
                    <p class="label">取货方式</p>
                    <p class="value">门店自取</p>
                </div>
                <div class="order-info">
                    <img class="icon" src="@/static/images/common/code.png" />
                    <p class="label">订单编号</p>
                    <p class="value">{{ detail.no || '' }}</p>
                </div>
                <div class="order-info">
                    <img class="icon" src="@/static/images/common/time.png" />
                    <p class="label">下单日期</p>
                    <p class="value">
                        {{ detail.createTime ? formatTime(detail.createTime) : '' }}
                    </p>
                </div>
            </div>
            <div class="sub-item">
                <div class="head">
                    <div class="left">退改规则</div>
                </div>
                <p class="rule-info">
                    购买成功后，<span class="blue">未收货使用前</span>支持线下退款，具体请联系商家。
                </p>
            </div>

            <div class="footer-bar">
                <div class="concat-business" @click="call">
                    <img class="phone" src="@/static/images/record/phone.png" />
                    联系商家
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import dayjs from 'dayjs';
export default {
    name: 'order-detail',
    data() {
        return {
            id: null,
            showHome: false,
            detail: {},
        };
    },
    onLoad(options) {
        this.id = Number(options.id);
        if (options.type) {
            this.showHome = true;
        }
        this.getOrderDetail();
    },
    methods: {
        back() {
            uni.navigateBack();
        },
        toHome() {
            uni.switchTab({
                url: '/pages/home/index',
            });
        },
        getOrderDetail() {
            this.$Api.trade.order
                .getDetail({
                    id: this.id,
                })
                .then(res => {
                    this.detail = res;
                });
        },
        formatTime(val) {
            return dayjs(val).format('YYYY-MM-DD HH:mm:ss');
        },
        call() {
            uni.showModal({
                title: '提示',
                content: '是否呼叫该号码？',
                success: res => {
                    if (res.confirm) {
                        uni.makePhoneCall({
                            phoneNumber: this.detail.studyhallPhone,
                        });
                    }
                },
            });
        },
        showPreview(url) {
            uni.previewImage({
                urls: [url],
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.container {
    padding: 32rpx 30rpx;
    .sub-item {
        padding: 20rpx 32rpx;
        background: #fff;
        border-radius: 24rpx;
        margin-bottom: 20rpx;
        .head {
            padding-bottom: 12rpx;
            border-bottom: 1rpx solid #e5e5e5;
            @include flexBox(space-between, center);
            .left {
                font-size: 28rpx;
                font-weight: 600;
                color: #2f2f2f;
                @include flexBox(flex-start, center);
                .icon {
                    width: 48rpx;
                    height: 48rpx;
                    margin-right: 10rpx;
                }
                .icon-small {
                    width: 32rpx;
                    height: 32rpx;
                    margin-right: 10rpx;
                }
            }
            .status {
                font-size: 24rpx;
                font-weight: 600;
                color: #fa6400;
            }
        }
        .sub-info {
            margin-top: 18rpx;
            @include flexBox(space-between);
            .right {
                flex: 1;
                height: 180rpx;
                margin-left: 24rpx;
                overflow: hidden;
                position: relative;
                @include flexBox(flex-start, flex-start, column);
                .name {
                    width: 80%;
                    font-size: 28rpx;
                    font-weight: 600;
                    color: #2f2f2f;
                    @include ellipsis(1);
                }
                .desc {
                    width: 80%;
                    font-size: 24rpx;
                    color: #898989;
                    margin-top: 12rpx;
                }
                .num {
                    font-size: 28rpx;
                    color: #898989;
                    position: absolute;
                    right: 0;
                    top: 50rpx;
                }
                .price {
                    width: 100%;
                    color: #2f2f2f;
                    position: absolute;
                    right: 0;
                    top: 0;
                    font-size: 28rpx;
                    @include flexBox(flex-end, center);
                    .unit {
                        margin-left: 10rpx;
                        font-weight: 600;
                        color: #2f2f2f;
                    }
                    .money {
                        font-weight: 600;
                        color: #2f2f2f;
                    }
                }
            }
        }
        .status-info {
            @include flexBox(flex-start, center);
            .icon {
                width: 48rpx;
                height: 48rpx;
                margin-right: 12rpx;
            }
            .finish {
                font-size: 28rpx;
                font-weight: 600;
                color: #109a28;
            }
            .closed {
                font-size: 28rpx;
                font-weight: 600;
                color: #5c5c5c;
            }
        }
        .order-info {
            margin-top: 24rpx;
            @include flexBox(flex-start, center);
            .icon {
                width: 32rpx;
                height: 32rpx;
                margin-right: 20rpx;
            }
            .label {
                font-size: 28rpx;
                color: #898989;
            }
            .value {
                font-size: 28rpx;
                color: #2f2f2f;
                margin-left: 32rpx;
            }
        }
        .rule-info {
            font-size: 24rpx;
            color: #5c5c5c;
            line-height: 44rpx;
            .blue {
                color: #5672c2;
            }
        }
    }
    .footer-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 14rpx;
        background: #fff;
        box-sizing: border-box;
        .concat-business {
            width: 100%;
            height: 88rpx;
            border: 1rpx solid #5428ec;
            color: #5428ec;
            border-radius: 8rpx;
            font-weight: 600;
            @include flexBox(center, center);
            .phone {
                width: 64rpx;
                height: 64rpx;
                margin-right: 10rpx;
            }
        }
    }
}
</style>
